<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Index Demo-Editor.md</title>
<!-- my.css为项目中的自定义样式 -->
<link rel="stylesheet" href="css/my.css">
<!-- 使用Editor.md必须引入以下三个资源 -->
<link rel="stylesheet" href="plugin/editormd/css/editormd.min.css">
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/editormd/editormd.min.js"></script>

</head>
<body>
	<div class="container">
		<div class="header">
			<h2>How to use Editor.md in our java web app?</h2>
		</div>
		<div class="footer">
			<form id="myForm" action="/preview" method="post" target="_blank">
				<div id="test-editormd">
					<!-- 每个 Editor.md 的 ID 元素下都有一个保存 Markdown 源码的 Textarea，你也可以通过设置开启另一个保存 HTML 源码的 Textarea，可以按需要获取相应的值 -->
					<textarea name="article">
#### GetValue
```html
&lt;div class="editormd" id="$id"&gt;
    &lt;textarea class="editormd-markdown-textarea" name="$id-markdown-doc"&gt;&lt;/textarea&gt;

    &lt;!-- html textarea 需要开启配置项 saveHTMLToTextarea == true --&gt;
    &lt;textarea class="editormd-html-textarea" name="$id-html-code"&gt;&lt;/textarea&gt;
&lt;/div&gt;
```

#### Example

```javascript
var testEditor = editormd("test-editormd", {
    width  : "90%",
    height : 640,
    path   : "../lib/",
    saveHTMLToTextarea : true
});

testEditor.getMarkdown();       // 获取 Markdown 源码
testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
```

#### Backend get form value

假设编辑器 ID 为 `test-editormd`，以 PHP 为例：

```php
<?php
    header("Content-Type:text/html; charset=utf-8");

    if (isset($_POST['submit'])) {
        echo "<pre>";
        echo htmlspecialchars($_POST["test-editormd-markdown-doc"]);
        echo "<br/><br/>";
        echo htmlspecialchars($_POST["test-editormd-html-code"]);
        echo "</pre>";
    }
?>
```
					</textarea>
				</div>
				<div class="submit">
					点击
					<button onclick="submitContent()">提交</button>
					按钮至下一页进行预览
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		var testEditor;

		$(function() {
			testEditor = editormd("test-editormd", {
				width : "100%",
				height : 640,
				syncScrolling : "single",
				path : "plugin/editormd/lib/"
			});

			/*
			// or
			testEditor = editormd({
			    id      : "test-editormd",
			    width   : "90%",
			    height  : 640,
			    path    : "plugin/editormd/lib/"
			});
			 */
		});

		function submitContent() {
			console.log("先生/女士您好，以下是您在页面中输入的内容，您过目……");
			console.log(testEditor.getMarkdown());
			$("#myForm").submit();
		}
	</script>
</body>
</html>